<!doctype html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Core Tooltip</title>

  <script src="../platform/platform.js"></script>

  <link rel="import" href="core-tooltip.html">

  <style>
    body {
      font-family: "Open Sans", sans-serif;
      font-weight: 300;
      padding: 24px;
    }

    section {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .example {
      margin: 35px 15px;
    }

    .example > * {
      margin: 0 15px;
    }

    .fakebutton {
      box-shadow: 0 0 3px #aaa inset;
      border-radius: 3px;
      padding: 7px 5px;
    }
    .fakebutton:hover {
      background-color: white;
    }

    img {
      width: 400px;
      height: 150px;
      object-fit: cover;
    }

    img.large {
      border: 15px solid white;
      box-sizing: border-box;
    }

    .profile {
      width: 60px;
      height: auto;
      border-radius: 50%;
      vertical-align: middle;
    }

    a {
      color: currentcolor;
      text-decoration: none;
    }

    .rich {
      background: hotpink;
      color: white;
      padding:20px;
      border-radius: 5px;
    }

    core-tooltip.fancy::shadow .polymer-tooltip {
      opacity: 0;
      -webkit-transition: all 300ms cubic-bezier(0,1.92,.99,1.07);
      transition: all 300ms cubic-bezier(0,1.92,.99,1.07);
      -webkit-transform: translate3d(0, -10px, 0);
      transform: translate3d(0, -10px, 0);
    }

    core-tooltip.fancy:hover::shadow .polymer-tooltip,
    core-tooltip.fancy:focus::shadow .polymer-tooltip {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  </style>
  <style shim-shadowdom2>
    .on /deep/ .polymer-tooltip {
      visibility: visible;
    }
  </style>

</head>
<body unresolved>

  <article onclick="this.classList.toggle('on');">

    <em>click the page to toggle all examples...</em>
    
      <section class="small">

        <div class="example">

          <core-tooltip label='position="left"' position="left">
            <div class="fakebutton">|||</div>
          </core-tooltip>

          <core-tooltip label='position="top"' position="top">
            <div class="fakebutton">|||</div>
          </core-tooltip>

          <core-tooltip label='position="bottom"' position="bottom">
            <div class="fakebutton">|||</div>
          </core-tooltip>

          <core-tooltip label='position="right"' position="right">
            <div class="fakebutton">|||</div>
          </core-tooltip>

        </div>

        <div class="example">

          <core-tooltip label="Fancy effect" class="fancy">
            <img src="https://pbs.twimg.com/profile_images/378800000548263523/c110b0a4c3e3e4d3dcce1d2020f3eded.jpeg
        " class="profile">
          </core-tooltip>

        </div>

      </section>

      <section>

        <div class="example">

          <core-tooltip>
            <div class="rich">Rich tooltip with HTML</div>
            <div tip>
              <img src="https://pbs.twimg.com/profile_images/378800000548263523/c110b0a4c3e3e4d3dcce1d2020f3eded.jpeg
        " class="profile" style="width: 40px;margin-right: 8px;">Eric <b>Bidelman</b> - <a href="#">@ebidel</a></div>
          </core-tooltip>

        </div>

        <div class="example">

          <core-tooltip label="<core-tooltip large>" large>
            Larger tooltips for mobile
          </core-tooltip>

        </div>

      </section>

      <section>

        <div class="example">

          <core-tooltip label="Tooltip with no arrow and always on: <core-tooltip noarrow show>" position="bottom" noarrow show>
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/building.jpg" class="large">
          </core-tooltip>

        </div>

      </section>
    
  </article>

</body>
</html>